import model from './model'
import * as echarts from 'echarts'

export default {
  data() {
    return {
      model: model(),
      // 图表id
      chartsId: null,
    }
  },
  props: {
    /**
     * id
     */
    id: {
      type: String,
      default: '',
    },
    /**
     * width
     */
    width: {
      type: String,
      default: '100px',
    },
    /**
     * height
     */
    height: {
      type: String,
      default: '100px',
    },
    /**
     * radius
     */
    radius: {
      type: Array,
      default: ['50%', '70%'],
    },
    /**
     * 图表数据
     */
    dataList: {
      type: Array,
      default: [],
    },
    /**
     * 图表数据
     */
    colorList: {
      type: Array,
      default: [],
    },
    /**
     * 总数
     */
    total: {
      type: Number,
      default: 0,
    },
    /**
     * 主题
     */
    theme: {
      type: String,
      default: 'default',
    },
  },
  watch: {
    /**
     * 监听数据更新图表
     */
    dataList() {
      this.getCharts()
    },
    /**
     * 监听数据更新图表
     */
    theme() {
      this.getCharts()
    },
  },
  methods: {
    getCharts() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = null
      if (myChart !== null && myChart !== '' && myChart !== undefined) {
        myChart.dispose()
      } else {
        myChart = echarts.init(document.getElementById(this.id))
      }
      /*
       * 绘制图表
       */
      const option = {
        color: this.colorList,
        series: [
          {
            type: 'pie',
            radius: this.radius,
            center: ['50%', '50%'],
            data: this.dataList,
            label: {
              formatter: '{name|{b}}\n{per|{d} %}',
              rich: {
                name: {
                  fontSize: 10,
                  color: '#fff',
                },
                per: {
                  fontSize: 10,
                  color: '#999',
                  padding: [3, 0],
                },
              },
            },

            labelLine: {
              length: 2,
              maxSurfaceAngle: 20,
            },
          },
        ],
      }
      myChart.setOption(option)
    },
  },
  mounted() {
    this.getCharts()
  },
}
